<template>
  <div class="departure-limit">
    <div>
      <el-radio-group
        v-model="departureLimit.addressType"
        :disabled="readonly"
        @change="(arg) => changeAddressType(arg)"
      >
        <el-radio :label="1">{{ $t('指定地点') }}</el-radio>
        <el-radio :label="2">{{ $t('火车站') }}</el-radio>
        <el-radio :label="3">{{ $t('港口') }}</el-radio>
      </el-radio-group>
      <el-cascader
        v-if="departureLimit.addressType === 1"
        ref="departure"
        v-model="departureLimit.departure"
        :options="areas"
        size="small"
        :placeholder="$t('请选择省市区')"
        style="margin-left: 12px"
        :disabled="readonly"
        @change="change('departure')"
      />
      <el-select
        v-if="departureLimit.addressType === 2"
        v-model="departureLimit.railwayStation"
        filterable
        remote
        reserve-keyword
        :placeholder="$t('请输入火车站')"
        value-key="code"
        style="margin-left: 12px"
        :disabled="readonly"
        :remote-method="(arg) => remoteMethodRailway(arg)"
        :loading="loadingRailway"
        @change="change('departure')"
      >
        <el-option
          v-for="item in railwayStationList"
          :key="item.code"
          :label="item.code + item.name"
          :value="item"
        >
        </el-option>
      </el-select>
      <el-select
        v-if="departureLimit.addressType === 3"
        v-model="departureLimit.portObj"
        filterable
        remote
        reserve-keyword
        :placeholder="$t('请选择港口')"
        value-key="code"
        style="margin-left: 12px"
        :remote-method="(arg) => remotePortName(arg)"
        :loading="loadingPort"
        :disabled="readonly"
        @change="change('departure')"
      >
        <el-option
          v-for="item in portList"
          :key="item.code"
          :label="item.code + item.name"
          :value="item"
        >
        </el-option>
      </el-select>
    </div>
  </div>
</template>
<script>
import nonStandardService from '@/services/nonStandardService'
export default {
  name: 'departureLimit',
  props: {
    detail: {
      type: Object,
      default: () => {
        return {}
      },
    },
    value: [String, Array],
    disabled: Boolean,
    parameter: {
      type: Object,
      default: () => {
        return {}
      },
    },
  },
  data() {
    return {
      departureLimit: {},
      railwayStation: {},
      portObj: {},
      portList: [],
      railwayStationList: [],
      departure: {},
      areas: [],
      loadingRailway: false,
      loadingPort: false,
      readonly: false,
    }
  },
  created() {
    this.queryArea()
    if (this.value) {
      this.setData()
    }
    this.readonly = Boolean(this.$route.query.readonly) || this.disabled
  },
  methods: {
    setData() {
      let value = JSON.parse(this.value)
      this.$set(this.departureLimit, 'addressType', value.addressType)
      if (value.addressType == 1) {
        this.departureLimit.departure = [
          value.countryName,
          value.provName,
          value.cityName,
          value.disName,
        ]
      }

      if (value.addressType == 2) {
        this.remoteMethodRailway({
          code: value.railwayStationCode,
          name: value.railwayStationName,
        })
      }
      if (value.addressType == 3) {
        this.departureLimit.portObj = {
          name: value.portName,
          code: value.portCode,
        }
        this.remotePortName(value.portName, '')
      }
    },
    queryArea() {
      // /tms-extend-api/area/tree
      nonStandardService.queryArea().then((res) => {
        this.areas = this.filterArea(res.data)
      })
    },
    filterArea(data) {
      var newTree = (data || []).map((e) => ({
        label: e.areaName,
        value: e.areaName,
        areaCode: e.areaCode,
        children: e.children,
      }))
      newTree.forEach(
        (x) => x.children && (x.children = this.filterArea(x.children))
      )
      return newTree
    },
    changeAddressType(data) {
      this.$emit('input', '')
      if (data == 3) {
        this.remotePortName(null)
      }
    },
    remotePortName(query) {
      nonStandardService
        .queryPortNameList({
          keyword: query,
        })
        .then((res) => {
          this['portList'] = res.data
        })
    },
    remoteMethodRailway(query) {
      if (query !== '') {
        this['loadingRailway'] = true
        nonStandardService
          .queryRailwayStation({
            type: 1,
            condition: query.code ? query.code : query,
          })
          .then((res) => {
            this['railwayStationList'] = res.data.list
            this['loadingRailway'] = false
            if (query.code) {
              this.departureLimit['railwayStation'] = query
            }
          })
      } else {
        this['railwayStationList'] = []
        this['loadingRailway'] = false
      }
    },
    getData() {
      let data = {}
      if (this.departureLimit.addressType == 1) {
        const departure = this.$refs.departure.getCheckedNodes()[0]
        let pathNode = departure.pathNodes
        data = {
          ...data,
          countryCode: pathNode[0] ? pathNode[0].data.areaCode : null,
          countryName: pathNode[0] ? pathNode[0].data.label : null,
          provCode: pathNode[1] ? pathNode[1].data.areaCode : null,
          provName: pathNode[1] ? pathNode[1].data.label : null,
          cityCode: pathNode[2] ? pathNode[2].data.areaCode : null,
          cityName: pathNode[2] ? pathNode[2].data.label : null,
          disCode: pathNode[3] ? pathNode[3].data.areaCode : null,
          disName: pathNode[3] ? pathNode[3].data.label : null,
        }
      }
      if (this.departureLimit.addressType == 2) {
        data.railwayStationCode = this.departureLimit.railwayStation.code
        data.railwayStationName = this.departureLimit.railwayStation.name
      }
      if (this.departureLimit.addressType == 3) {
        data.portCode = this.departureLimit.portObj.code
        data.portName = this.departureLimit.portObj.name
      }
      return {
        ...data,
        addressType: this.departureLimit.addressType,
      }
    },
    change() {
      if (this.departureLimit.addressType == 1) {
        const departure = this.$refs.departure.getCheckedNodes()[0]
        let pathNode = departure.pathNodes
        if (pathNode && pathNode.length) {
          this.$emit('input', pathNode[0].data.areaCode)
        }
      }
      if (this.departureLimit.addressType == 2) {
        if (
          this.departureLimit.railwayStation &&
          this.departureLimit.railwayStation.code
        ) {
          this.$emit('input', this.departureLimit.railwayStation.code)
        }
      }
      if (this.departureLimit.addressType == 3) {
        if (this.departureLimit.portObj && this.departureLimit.portObj.code) {
          this.$emit('input', this.departureLimit.portObj.code)
        }
      }
    },
  },
}
</script>
